<template>
	<z-container left-icon-size="0" title="订单列表" showNoLoginPage noLoginLabel="登录后可查看统计信息">
		<z-sticky>
			<z-subsection v-model="state.current" :list="statisicsTabs" @change="changeCurrent" />
			<uv-gap height="10"></uv-gap>
			<z-tabs :list="dateTabs" :inactiveStyle="{...inactiveStyle,width:'210rpx'}"
				:activeStyle="{...activeStyle,width:'210rpx'}" :current="state.typeCurrent" @change="changeType"></z-tabs>
			<uv-gap height="10"></uv-gap>	
		</z-sticky>
		
		<view v-if="state.current == 0" class="ss-p-x-32 ss-p-b-32">
			<view class="bg-white ss-p-24 br-24">
				<view class="font-w-600 ss-m-b-24 fs-32">单量</view>
				<TreeCharts v-if="info" :info="info" />
			</view>
			<view class="bg-white ss-p-24 br-24 ss-m-t-32">
				<view class="font-w-600 ss-m-b-24 fs-32">业绩</view>
				<FoldlineCharts v-if="info" :info="info" />
			</view>
		</view>
		<view v-else class="ss-p-x-32 ss-p-b-32">
			<z-title>门店业绩</z-title>
			<view class="br-24 bg-white ss-m-t-24">
				<view class="ss-flex font-w-600 ss-text-center">
					<view class="ss-flex-1 ss-p-y-24 b-r">品牌</view>
					<view class="ss-flex-1 ss-p-y-24 b-r">检测量</view>
					<view class="ss-flex-1 ss-p-y-24 b-r">成交量</view>
					<view class="ss-flex-1 ss-p-y-24">未成交量</view>
				</view>
				<view v-for="(item,index) in info?.brands || []" :key="item.id" class="ss-flex ss-text-center fc-dark6 b-t">
					<view class="ss-flex-1 ss-p-y-24 b-r ss-line-1">{{ item.name }}</view>
					<view class="ss-flex-1 ss-p-y-24 b-r">{{ item.jiance_count }}</view>
					<view class="ss-flex-1 ss-p-y-24 b-r">{{ item.cj_count }}</view>
					<view class="ss-flex-1 ss-p-y-24">{{ item.qx_count }}</view>
				</view>
			</view>
			<z-title class="ss-m-t-24">分类统计</z-title>
			<view class="br-24 bg-white ss-m-t-24">
				<view class="ss-flex font-w-600 ss-text-center">
					<view class="ss-flex-1 ss-p-y-24 b-r">服务类型</view>
					<view class="ss-flex-1 ss-p-y-24 b-r">检测量</view>
					<view class="ss-flex-1 ss-p-y-24 b-r">成交量</view>
					<view class="ss-flex-1 ss-p-y-24">未成交量</view>
				</view>
				<view v-for="(item,index) in info?.yewulist || []" :key="item.id" class="ss-flex ss-text-center fc-dark6 b-t">
					<view class="ss-flex-1 ss-p-y-24 b-r ss-line-1">{{ item.name }}</view>
					<view class="ss-flex-1 ss-p-y-24 b-r">{{ item.jiance_count }}</view>
					<view class="ss-flex-1 ss-p-y-24 b-r">{{ item.cj_count }}</view>
					<view class="ss-flex-1 ss-p-y-24">{{ item.qx_count }}</view>
				</view>
			</view>
		</view>
	</z-container>
</template>

<script setup>
	import {
		statisicsTabs,
		activeStyle,
		inactiveStyle,
		dateTabs
	} from "@/sheep/enu/index.js"
	import sheep from "@/sheep"
	import FoldlineCharts from "./components/statistics/FoldlineCharts.vue"
	import TreeCharts from "./components/statistics/TreeCharts.vue"
	const state = reactive({
		current: 0,
		typeCurrent:0,
		loading:true
	})
	const info = ref(null)
	onShow(() => {
		onRefresh()
	})
	function changeType(e){
		state.typeCurrent = e.index
		onRefresh()
	}
	function changeCurrent(e){
		state.current = e
		onRefresh()
	}
	function onRefresh(){
		info.value = null
		if(state.current == 0) getMyStatistics()
		else getStoreStatistics()
	}
	async function getMyStatistics(){
		const { code,data } = await sheep.$api.user.myStatistics({type:dateTabs[state.typeCurrent]?.type})
		if(code != 1) return
		info.value = data
		state.loading = false
	}
	async function getStoreStatistics(){
		const { code,data } = await sheep.$api.user.storeStatistics({type:dateTabs[state.typeCurrent]?.type})
		if(code != 1) return
		info.value = data
		state.loading = false
	}
</script>

<style lang="scss" scoped>
	$borderColor:#eee;
	.b-r {
		border-right: 1rpx solid $borderColor;
	}
	.b-b {
		border-bottom: 1rpx solid $borderColor;
	}
	.b-t {
		border-top: 1rpx solid $borderColor;
	}
	.b-l {
		border-left: 1rpx solid $borderColor;
	}
</style>